有时候,看别人网站上,写一个标语类的文字,能刚好填充整个页面宽度,或部分页面宽度。窗口怎么拉伸和缩小,文字都能随之而改变,保持一行不变。
本人通过,网上搜索终于实现了。因为网上的知识点太散,这里给大家整理一下思路,希望对大家有所帮助。
一、在页面加载时(就是打开网页时)js获取,DIV宽度。用到 js 的 window.onload
二、在页面伸缩时,获取DIV宽度。 用到 jQuery 的 $(window).resize
三、js给字体设置计算好的大小
下面是代码
div 部分 给文字预设一个大小,大家根据自己的情况设一个就行。container 为bootstrapt框架的一个属性。
<div class="container">
<div style="overflow:hidden; font-size:24px;" id="dongtai">我是一个中国人应该有中国人的样子</div>
</div>
JS第一部分:
<script language="javascript">
//当浏览器加载时计算字体大小,并设置
window.onload = function(){
var dongtai=document.getElementById("dongtai");//获取指定 ID 的第一个对象
var fontw=12; //初始的字体大小
var width=dongtai.offsetWidth;//获取DIV的宽度
var lenstr=dongtai.innerHTML.length;//获取DIV内文字长度
dongtai.style.fontSize=parseInt(width/lenstr)+"px";//计算,parseInt取整,然后赋值
// console.log(width);//用日志来查看一些值。及判断出现的错误。
}
</script>
JS第二部分:
<script language="javascript">
//当窗口变化时,动态计算字体大小,并调整
$(window).resize(function () {
var dongtai=document.getElementById("dongtai");//获取指定 ID 的第一个对象
var fontw=12; //初始的字体大小
var width=dongtai.offsetWidth;//获取DIV的宽度
var lenstr=dongtai.innerHTML.length;//获取DIV内文字长度
dongtai.style.fontSize=parseInt(width/lenstr)+"px";//计算,parseInt取整,然后赋值
//}
})
</script>
全部代码,合并起来。切记:要引入js和jquery文件
<html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="/bootstrap/bootstrap3.3.7.min.css"> <title>动态计算并改变文字大小</title> </head> <script src="/bootstrap/jquery3.2.1.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="/bootstrap/bootstrap3.3.7.min.js"></script> <div class="container"> <div style="overflow:hidden;font-size:24px;" id="dongtai">我是一个中国人应该有中国人的样子</div> </div> </body> </html> <script language="javascript"> //当浏览器加载时计算字体大小,并设置 window.onload = function(){ fontResize(); } //当窗口变化时,动态计算字体大小,并调整 $(window).resize(function () { fontResize(); }); function fontResize(){ var dongtai=document.getElementById("dongtai");//获取指定 ID 的第一个对象 var fontw=12; //初始的字体大小 var width=dongtai.offsetWidth;//获取DIV的宽度 var lenstr=dongtai.innerHTML.length;//获取DIV内文字长度 dongtai.style.fontSize=parseInt(width/lenstr)+"px";//计算,parseInt取整,然后赋值 } </script>